# Styling

## Custom CSS & Styles

To add custom CSS, you can create a `styles.css` file in the Vocs root directory.
This file will be automatically imported into the app.

```
my-project/             
├── docs/
│   ├── pages/ 
|   |   ├── index.mdx 
|   |   └── about.tsx 
│   └── public/
│   |   └── favicon.ico
// [!code focus]
|   └── styles.css
├── node_modules/
│   ...
```

The `styles.css` file could look like:

```css [styles.css]
body {
  background-color: #f3f3f3;
}

.Vocs_H1 {
  color: red;
}
```

:::tip[Tip]
You can also utilize the [CSS `@import`](https://vitejs.dev/guide/features.html#import-inlining-and-rebasing) statement to import other CSS files.
:::

#### Importing CSS into layout Component

Alternatively, you can import CSS files directly into your [layout component](/docs/structure#layout-component).

```tsx [layout.tsx]
import './global.css' // [!code focus]
import './theme.css' // [!code focus]

export default function Root({ children }) {
  return children
}
```

#### Importing CSS into Markdown

You can also import CSS files directly into your Markdown files.

```mdx [example.md]
import './theme.css' // [!code focus]

# Hello world

This is me.
```

## Tailwind

Vocs comes with built-in support for [Tailwind](https://tailwindcss.com/).

To enable Tailwind, simply import `tailwindcss` in the `styles.css` file of your project.

:::code-group

```css [styles.css]
@import "tailwindcss";
```

```txt [Project]
my-project/             
├── docs/
│   ├── pages/ 
|   |   ├── index.mdx 
|   |   └── about.tsx 
│   └── public/
│   |   └── favicon.ico
// [!code focus]
|   └── styles.css
├── node_modules/
│   ...
```

:::